<template>
	<view style="background: #f5f5f9;">
		<view id="myOrderId" class="app-height myOrder connaught-style">
		    <view class="tabs">
		        <view class="item" :class="[status==0?'active':'']" @click="tabsClick(0)">全部<view class="span"></view></view>
		        <!-- <view class="item" :class="[status==1?'active':'']" @click="tabsClick(1)">待付款<view class="span"></view></view>
		        <view class="item" :class="[status==2?'active':'']" @click="tabsClick(2)">待发货<view class="span"></view></view>
		        <view class="item" :class="[status==3?'active':'']" @click="tabsClick(3)">发货中<view class="span"></view></view>
		        <view class="item" :class="[status==4?'active':'']" @click="tabsClick(4)">已收货<view class="span"></view></view> -->
		    </view>
			<scroll-view @scroll="scroll" @scrolltolower="onRefresh"  :scroll-top="scrollTop" scroll-y class="scroll-view">
				<view class="order-module">
					<view class="orer-data" v-for="order in orderList">
						<view class="order-header">
							<view class="p">{{order.orderNum}}</view>
							<view class="p">{{order.createTime}}</view>
						</view>
						<view class="order-content" >
							<view class="order-item">
								<image mode="widthFix" class="main" @click="orderDet(order.id)" :src="order.banarImg"/>
								<view class="info">
									<view class="title" @click="orderDet(order.id)">{{order.productName}}</view>
									<view style="display: flex;justify-content: space-between;">
										<view class="price-num" @click="orderDet(order.id)">￥{{order.productPrice}}
											<view class="span">x {{order.productQuantity}}</view>
										</view>
										<view v-if="order.status == 2" class="price-num" @click="sendMsg(order.userId,order.productId)">
											<view class="span" style="background-color:#03bab6;color: white;border-radius: 5px;padding: 7rpx;">联系客服</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view v-if="order.status == 1" class="total-btn">
								<view class="total">
									<view class="num">总计：<span>￥{{order.payAmount}}</span></view>
								</view>
								<view class="btn" style="display: flex;">
									<view class="button" @click="cancelOrder(order.id)">取消</view>
									<view class="button" @click="repay(order.id)">支付</view>
								</view>
							</view>
							<view v-if="order.status == 2" class="stocking">
								<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_goods.png"/>
								商家全力备货中···
							</view>
							<view v-if="order.status == 3" class="logistics">
								<view class="info">
									<!--<p class="sfe"><img src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_sf_express.png"/> 顺丰物流</p>-->
									<view class="num p">物流单号：{{order.trackNum}}</view>
								</view>
								<view class="button" @click="confirmReceipt(order.id)">确认收货</view>
							</view>
						</view>
					</view>
				</view>
				<hint ref="hint"></hint>
			</scroll-view>	
		</view>
	</view>
</template>

<script>
	import orderApi from '@/api/myOrder.js'
	import commonApi from '@/utils/commonMethod.js';
	
	export default {
		data() {
			return {
				search: {
					page: 1,
					limit: 10,
					lastpage: 0,
				},
				status: 0,
				orderList:[],
				noMoreShow: false,
				scrollTop: 0,
				totalPage:0,
				
				currentUser:{},
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		async onLoad(options) {
			if(options.status){
				this.status = options.status
			}
			this.query()
			const currentUser = await commonApi.currentUserAxios();
			this.currentUser = currentUser.data.session_user_h5;
		},
		onShow(){
				
			setTimeout(()=> {
				
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
				
			}, 100);
		},
		onHide(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		onUnload(){
				setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		mounted(){
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
		},
		methods: {
			saveFootPrint(stayTime){
				commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的订单")
				
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTo;
				this.$store.dispatch('renewScrollTop', e.detail.scrollTop);
			},
			onRefresh() {
				console.log(this.search.page);
				console.log(this.totalPage);
				if(this.search.page <= this.totalPage){
					this.search.page;
					this.$refs.hint.setStatus('loading');
					console.log("还有下一页" + this.search.page);
					this.query();
				}else{
					this.$refs.hint.setStatus('loadingComplete');
					console.log("没有下一页")
				}
			},
			tabsClick(e) {
				this.status = e;
				this.search.page = 1;
				this.search.lastpage = 0;
				this.orderList = [];
				this.noMoreShow = false;
				this.query();
			},
			query() {
				let status = this.status;
				if(status == 0){
					status = '';
				}
				if(this.search.page != this.search.lastpage){
					this.search.lastpage = this.search.page
					orderApi.getOrderList(status,this.search.page,this.search.limit).then(res => {
						let resList = res.data.page.list;
						this.totalPage = res.data.page.totalPage
						console.log(res);
						if (resList.length > 0) {
							for (let i = 0; i < resList.length; i++) {
								if(resList[i].banarImg){
									resList[i].banarImg = resList[i].banarImg.split(',')[0]
								}
							}
							this.orderList = this.orderList.concat(resList);
							this.search.page++;
						} else {
							this.noMoreShow = true;
							this.$refs.hint.setStatus('loadingComplete');
						}
					}).catch(res => {
						this.search.lastpage = this.search.lastpage - 1;
					})
				}
			},
			cancelOrder(id){
				uni.showModal({
					title: "",
					content: "确定取消订单",
					showCancel:true,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
							orderApi.cancelOrder(id).then(res => {
								uni.showModal({
									title: "",
									content: "订单已取消",
									showCancel:false,
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
											that.tabsClick(that.status);
										} else if (res.cancel) {
											console.log('用户点击取消');
											
										}
									}
								});
							})
						}
					}.bind(this)
				});
			},
			repay(id){
				console.log("支付");
				 //支付方式
				let tradeType;
				// if(isWeiXin()){
					// tradeType = 'JSAPI';
				// }else{ 
				// 	tradeType = 'MWEB';
				// }
				orderApi.orderRepay(id,tradeType).then(res => {
					if(res.data.code == 0){
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": res.data.payMap.appId,//公众号名称，由商户传入
								"timeStamp": res.data.payMap.timeStamp,//时间戳，自1970年以来的秒数
								"nonceStr": res.data.payMap.nonceStr, //随机串
								"package": res.data.payMap.package,
								"signType": res.data.payMap.signType,//微信签名方式
								"paySign": res.data.payMap.paySign //微信签名
							},
							function (res) {
								if (res.err_msg == "get_brand_wcpay_request:cancel" || res.err_msg == "get_brand_wcpay_request:fail") {
									let remark;
									if(res.err_msg == "get_brand_wcpay_request:cancel"){
										remark = "用户取消支付";
									}else{
										remark = "用户支付失败";
									}
									//取消付款或支付失败，记录日志
									
									orderApi.saveOrderPayLog(this.orderInfo.orderNum,remark).then(res => {
										
									})
								}else{
									uni.showModal({
										title: "",
										content: "付款成功",
										showCancel:false,
										success: function (res) {
											var that = this
											if (res.confirm) {
												console.log('用户点击确定');
												that.tabsClick(that.status);
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}.bind(this)
									});
								}
							}
						);
					}
				})
			},
			confirmReceipt(id){
				uni.showModal({
					title: "",
					content: "确定已收到货",
					showCancel:true,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
							orderApi.confirmReceipt(id).then(res => {
								uni.showModal({
									title: "",
									content: "收货成功",
									showCancel:false,
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
											that.tabsClick(that.status);
										} else if (res.cancel) {
											console.log('用户点击取消');
											
										}
									}
								});
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							
						}
					}.bind(this)
				});
			},
			orderDet(id){
				console.log("跳转页面");
				uni.navigateTo({
					url: '/pages/statistics/orderDet?id=' + id
				})
			},
			//在线沟通
			sendMsg(userId,productId) {
				uni.navigateTo({
					url: '/pages/news/chatDetail?toUserId=' + userId + '&productId=' + productId
				})
			},
	
		},
	}
</script>

<style>
	.connaught-style .tabs {
	    height: 90rpx;
		line-height: 90rpx;
	    justify-content: flex-start;
	    background-color: #ffffff;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    z-index: 35;
		display: flex;
	}
	.myOrder .tabs .item {
	    width: 20%;
	}
	
	.connaught-style .tabs .item {
	    font-size: 15px;
	    text-align: center;
	    position: relative;
	}

	.connaught-style .tabs .item .span {
	    position: absolute;
	    height: 4rpx;
	    border-radius: 2rpx;
	}
	.myOrder .tabs .item .span {
	    width: 50%;
	    left: 25%;
	    /* bottom: -26rpx; */
	}
	.connaught-style .tabs .item.active {
	    color: #019d9d;
	}
	.connaught-style .tabs .item.active .span {
	    background-color: #019d9d;
	}
	.myOrder .order-module {
	    padding: 28rpx;
	    padding-top: 126rpx;
	    padding-bottom: 0px;
	}
	.myOrder .order-module .orer-data {
	    background-color: #ffffff;
	    border-radius: 18rpx;
	    overflow: hidden;
	    color: #8f9aa8;
	    padding: 0px 28rpx 7rpx;
	    margin-bottom: 28rpx;
	}
	.myOrder .order-module .orer-data .order-header {
	    height: 70rpx;
	    border-bottom: 1px solid #ebebeb;
		display: flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.myOrder .order-module .orer-data .order-content {
	    padding-top: 25rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item {
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    margin-bottom: 25rpx;
		display: flex;
	}
	.myOrder .order-module .orer-data .order-content .order-item .main {
	    flex-shrink: 0;
	    width: 121rpx;
	    height: 121rpx;
	    border-radius: 5rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info {
	    width: 100%;
	    flex-shrink: 1;
	    margin-left: 18rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info .title, .myOrder .order-module .orer-data .order-content .order-item .info .price-num{
	    font-size: 13px;
	    color: #333333;
	    line-height: 31rpx;
	    margin-top: 7rpx;
		display: flex;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info .price-num {
	    padding-top: 14rpx;
	}
	.myOrder .order-module .orer-data .order-content .order-item .info .price-num .span {
	    padding: 0 14rpx;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn {
	    padding-top: 14rpx;
	    padding-bottom: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn .total {
	    font-size: 13px;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn .total .span {
	    font-size: 15px;
	    color: #fc5260;
	}
	
	.myOrder .order-module .orer-data .order-footer .total-btn .btn .button {
	    width: 112rpx;
	    height: 56rpx;
	    border-radius: 28rpx;
	    border: 0;
	    margin-left: 18rpx;
	    color: #8f9aa8;
	    background: #f0f6ff;
		text-align: center;
		line-height: 56rpx;
	}
	.myOrder .order-module .orer-data .order-footer .total-btn .btn .button:last-child {
	    background: #029e9d;
	    color: #ffffff;
	}	
	.myOrder .order-module .orer-data .order-footer .stocking {
	    justify-content: flex-start;
	    height: 65rpx;
		line-height: 65rpx;
	    background-color: #fff6e8;
	    border-radius: 9rpx;
	    color: #ffa10e;
	    margin: 28rpx 0px 28rpx;
	}
	.myOrder .order-module .orer-data .order-footer .stocking image {
	    width: 31rpx;
	    margin: 0px 12rpx 0px 18rpx;
	}
	.myOrder .order-module .orer-data .order-footer .logistics {
	    flex-wrap: nowrap;
	    padding-bottom: 28rpx;
	    padding-top: 3rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.myOrder .order-module .orer-data .order-footer .logistics .button {
	    flex-shrink: 0;
	    width: 150rpx;
	    height: 56rpx;
	    border-radius: 28rpx;
	    border: 0;
	    margin-left: 18rpx;
	    background: #029e9d;
	    color: #ffffff;
		text-align: center;
		line-height: 56rpx;
	}
	.scroll-view {
	    height: calc(100vh - 10rpx);
	}
</style>